<template>
	<view class="wrap">
		
		<view class="theForm">
			<form @submit="formSubmit">
				<view class="fields-box">
					<view>类型</view>
					<view>
						<picker mode="selector" :range="items"  @change="onPickerChange">
						  <view class="picker">
							{{ items[selectedItem] }}
						  </view>
						</picker>
					</view>
				</view>
				<view class="fields-box">
					<view>抬头</view>
					<view>
						<input type="text" class="uni-input" name="title" :value="title" placeholder="抬头" />
					</view>
				</view>
				
				<view class="fields-box">
					<view>税号</view>
					<view>
						<input type="text" class="uni-input" name="shuihao" :value="shuihao" placeholder="税号" />
					</view>
				</view>
				
				<view class="fields-box"  v-if="selectedItem">
					<view>地址</view>
					<view>
						<input type="text" class="uni-input" name="address" :value="address" placeholder="地址" />
					</view>
				</view>
				<view class="fields-box"  v-if="selectedItem">
					<view>电话</view>
					<view>
						<input type="text" class="uni-input" name="tel" :value="tel" placeholder="电话" />
					</view>
				</view>
				<view class="fields-box"  v-if="selectedItem">
					<view>开户行</view>
					<view>
						<input type="text" class="uni-input" name="kh_bank" :value="kh_bank" placeholder="开户行" />
					</view>
				</view>
				<view class="fields-box"  v-if="selectedItem">
					<view>银行卡号</view>
					<view>
						<input type="text" class="uni-input" name="kh_number" :value="kh_number" placeholder="银行卡号" />
					</view>
				</view>
				
				<view class="switch-box">
					<view>默认</view>
					<view>
						<switch :checked="is_default" @change="switchChange" />
					</view>
				</view>
				
				<view class="btn">
					<button form-type="submit">提 交</button>
				</view>
				
			</form>
		</view>
		
		
	</view>
</template>

<script> 
	import areaData from '@/common/area-data-min'
	import * as check from '@/common/check'
    export default {
		data(){
			return {
				id: 0,
				title: "",
				shuihao: "",
				address: "",
				tel: "",
				kh_bank: "",
				kh_number: "",
				is_default: false,
				type:0,
				items: ['个人','企业'],
				selectedItem: 0,
				isSubmitting:false
			};
		},
		onLoad(options) {
			this.id = options.id != undefined ? options.id : 0;
		},
		onShow() {
			let users = this.$storage.getJson("users");
			if(users == null){
				this.$utils.navigateTo('public/login');
			}else{
				this.$http.getTaitouDetail({ id: this.id}).then(res=>{
					if(res.status){
						console.log(1111111);
						this.title = res.data.title;
						this.shuihao = res.data.shuihao;
						this.address = res.data.address;
						this.tel = res.data.tel;
						this.kh_bank = res.data.kh_bank;
						this.kh_number = res.data.kh_number;
						this.is_default = res.data.is_default ? true : false;
						this.selectedItem = res.data.type;
					}
				});
			}
		},
		onBackPress(e) {
			this.$storage.remove("ORDER_CONFIRM_SELECT");
			return false;
		},
        methods:{
			onPickerChange(e) {
			  this.selectedItem = e.detail.value;
			},
			switchChange(e){
				this.is_default = e.target.value;
			},
			formSubmit(e){
				
				let formdata = e.detail.value;
				if(formdata.title.length <= 0){
					this.$utils.msg("请填写抬头");
					return ;
				}
				if(formdata.shuihao.length <= 0){
					this.$utils.msg("请填写税号");
					return ;
				}
				
				// if(!check.checkPhone(formdata.tel)){
				// 	this.$utils.msg("您填写的手机号码不正确！");
				// 	return ;
				// }
				
					if (this.isSubmitting) return;
					this.isSubmitting = true;  
				let params = {
					id: this.id,
					type: this.selectedItem,
					title: formdata.title,
					shuihao: formdata.shuihao,
					address: formdata.address,
					tel: formdata.tel,
					kh_bank: formdata.kh_bank,
					kh_number: formdata.kh_number,
					is_default: this.is_default ? 1 : 0,
				};
				this.$http.taitouEdit(params).then((res)=>{
					if(res.status){
						this.$utils.navigateTo("fapiao/taitou");
					}else{
						this.$utils.msg(res.info);
					}
					this.isSubmitting = false; 
				});
			}
		} 
    }  
</script>

<style lang="scss" scoped>
	.wrap{
	    width: 100%;
	    height: 100vh;
	    background-color: #fff;
	}
	
	.theForm{
		width: 650rpx;
		padding-top: 50rpx;
		margin: 0 auto;
		.fields-box{
			width: 100%;
			float: left;
			font-size: 31rpx;
			height: 110rpx;
			line-height: 110rpx;
			border: 2rpx solid #e0e0e0;
			border-left: 0;
			border-right: 0;
			&:nth-child(1){
				border-top: 0;
				border-bottom: 0;
			}
			&:nth-child(2){
				border-bottom: 0;
			}
			&:nth-child(3){
				border-bottom: 0;
			}
			view:first-child {
				float: left;
				width: 160rpx;
				color: #999;
			}
			view:last-child {
				float: right;
				width: 490rpx;
				color: #333;
				input {
					height: 110rpx;
					line-height: 110rpx;
				}
			}
		}
		.switch-box{
			background-color: #fff;
			width: 100%;
			float: left;
			font-size: 31rpx;
			height: 110rpx;
			line-height: 110rpx;
			view:first-child {
				float: left;
				color: #999;
			}
			view:last-child {
				float: right;
			}
		}
		.btn{
			float: left;
			margin: 25rpx 0;
			button {
				width: 650rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				background-color: #78C0F9;
				border: 1px solid #78C0F9;
				color: #fff;
				font-size: 33rpx;
			}
		}
	}
</style>